<template>
  <div class="postPubish">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top: 20px">
      <!-- 文本框 -->
      <el-form ref="postlist" :model="postlist" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="postlist.title"></el-input>
        </el-form-item>
        <!-- 单选框 -->
        <el-form-item label="类型">
          <el-radio-group v-model="postlist.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 富文本框 -->
        <el-form-item label="类型">
          <VueEditor
            :config="config"
            ref="vueEditor"
            v-if="postlist.type == 1"
          />
          <el-upload
            class="upload-demo"
            v-if="postlist.type == 2"
            :action="path"
            :file-list="fileList"
            :headers="getToken()"
            :on-success="onSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，</div>
          </el-upload>
        </el-form-item>
        <!-- 栏目 -->
        <!-- 封面 -->
        <el-form-item label="封面">
          <el-upload
            :action="path"
            :limit="3"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-exceed="onExceed"
            :on-success="onSuccessCover"
            :headers="getToken()"
            :on-remove="onRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="userImg" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- 发布按钮 -->
      </el-form>
      <el-button type="primary" @click="postList">发布文章</el-button>
    </el-card>
  </div>
</template>

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import axios from "@/utils/myaxios.js";
export default {
  components: {
    VueEditor,
  },
  data() {
    return {
      dialogVisible: false,
      userImg: "",
      path: axios.defaults.baseURL + "/upload",
      fileList: [],
      postlist: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          headers: this.getToken(),
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          headers: this.getToken(),
          uploadSuccess(res, insert) {
            insert(axios.defaults.baseURL + res.data.data.url);
          },
        },
      },
    };
  },
  methods: {
    // 封面移除时的处理 :重点是将对应的图片数据从postlist.cover 移除
    onRemove(file, fileList) {
      // console.log(file, fileList);
      let id = file.response.data.id;
      console.log(file.response.data.id);
      // file  是当前移除的图片
      // fileList 现在有的图片
      for (let i = 0; i < this.postlist.cover.length; i++) {
        if (this.postlist.cover[i].id == id) {
          this.postlist.cover.splice(i, 1);
          break;
        }
      }
    },
    // 封面上传成功
    onSuccessCover(response, file, fileList) {
      // console.log(response, file, fileList);
      if (response.message == "文件上传成功") {
        //需要传递的是id
        this.postlist.cover.push({ id: response.data.id });
      }
    },
    // 文件超出提示
    onExceed(files, fileList) {
      this.$message.warning("最多只能上传三张图片");
    },

    // 实现封面的预览
    handlePictureCardPreview(file) {
      this.userImg = file.url;
      this.dialogVisible = true;
    },
    // 文件上传成功是的
    onSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
      if (response.message == "文件上传成功") {
        // 上传成功就提示用户
        this.$message("上传成功");
        // 把要上传的视频地址和路径做拼接
        this.postlist.content = this.path + response.data.url;
      }
    },
    // 点击发布收集数据
    postList() {
      // 判断如果值为1就是类型 则就添加
      if (this.postlist.type == 1) {
        this.postlist.content = this.$refs.vueEditor.editor.root.innerHTML;
      }
      // 提示用户上传成功
      this.$message("发布文章成功");
      console.log(this.postlist);
      // 发布成功后就把值清空
      this.postlist = {};
    },
    // 获取token
    // 我们所用的组件,他可以实现文件上传,但是他并没有使用我们封装的axios,而是内部自己封装了异步请求操作,意味着我们添加的拦截器,他根本不会经过所以我们需要使用组件内置的headers 来实现token的传递
    getToken() {
      return {
        Authorization: JSON.parse(localStorage.getItem("heimahoutai")).token,
      };
    },
  },
};
</script>

<style lang="less" scoped>
</style>